<template>
  <div class="login-container">
    <div class="login-form-content">
      <div class="step-content flex-column">
        <template v-if="step == 1">
          <span class="step-title">找回密码</span>
          <div class="form-item">
            <span class="form-label">负责电话：</span>
            <div class="form-val">
              <el-input v-model="params.username" placeholder="请输入手机号码"></el-input>
            </div>
          </div>
          <div class="form-btn-content">
            <el-button :loading="boo.submit_step1" type="primary" class="form-btn" size="small" @click="getCodeStep1">提交验证</el-button>
          </div>
        </template>
        <template v-if="step == 2">
          <span class="step-title">账户验证</span>
          <span class="step-txt">已向您尾号{{dealTel(params.username)}}的手机发送短信验证</span>
          <div class="form-item">
            <span class="form-label">验证码：</span>
            <div class="form-val">
              <el-input v-model="params.code" placeholder="请输入验证码"></el-input>
            </div>
            <el-button :loading="timerObj.loading" @click="getCode" type="text" size="small">{{timerObj.tips}}</el-button>
          </div>
          <div class="form-btn-content">
            <el-button :loading="boo.submit_step2" type="primary" class="form-btn" size="small" @click="verifyPhoneCode">提交验证</el-button>
          </div>
        </template>
        <template v-if="step == 3">
          <span class="step-title">密码重置</span>
          <div class="form-item">
            <span class="form-label">请输入密码：</span>
            <div class="form-val">
              <el-input v-model="params.password" type="password" placeholder="请输入验证码"></el-input>
            </div>
            <span class="step-txt">密码为字母+数字格式，不少于8位</span>
          </div>
          <div class="form-item">
            <span class="form-label">请确认密码：</span>
            <div class="form-val">
              <el-input v-model="params.passwordWeb" type="password" placeholder="请输入验证码"></el-input>
            </div>
          </div>
          <div class="form-btn-content">
            <el-button :loading="boo.submit_step3" type="primary" class="form-btn" size="small" @click="updatePassword">重置密码</el-button>
          </div>
        </template>
      </div>
      <div class="info-content flex-column">
        <svg-icon class="login-icon" icon-class="forget-pwd"></svg-icon>
        <div class="info-btn-content flex-normal">
          <el-button type="text" size="small" class="btn-txt" @click="jumpPage('/login')">我有账户，立即登录</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { verifyPhoneCode, updatePassword } from "@/api/login";
import { getCode } from '@/api/common/index'
import { isPhoneNum } from '@/utils/tools.js'

export default {
  name: "Login",
  data() {
    return {
      boo: {
        submit_step1: false,
        submit_step2: false,
        submit_step3: false
      },
      step: 1,
      timerObj: {
        timer: null,
        seconds: 60,
        loading: false,
        tips: '获取验证码'
      },
      params: {
        username: "",
        code: "",
        password: "admin123",
        passwordWeb: "admin123",
      }
    };
  },
  mounted(){
    let _self = this
    if(_self.timerObj.timer){
      clearInterval(_self.timerObj.timer)
      _self.timerObj.timer = null
    }
  },
  methods: {
    dealTel(tel){
      if(!tel || tel == '') return ''
      return tel.replace(/d{7}(d{4})/, '*******$1')
    },
    async getCodeStep1(){
      let _self = this, {username} = this.params
      if(!isPhoneNum(username)) return _self.$message.error('手机号格式错误')
      _self.boo.submit_step1 = true
      await getCode(username).then(res => {
        _self.$message.success('验证码成功已发送')
        _self.step = 2
      })
      _self.boo.submit_step1 = false
    },
    startTimer(){
      let _self = this
      _self.timerObj.timer = setInterval(() => {
        _self.timerObj.seconds--
        if(_self.timerObj.seconds === 0){
          _self.timerObj.seconds = 60
          _self.timerObj.loading = false
          _self.timerObj.tips = '重新获取验证码'
          clearInterval(_self.timerObj.timer)
        }else{
          _self.timerObj.tips = `${_self.timerObj.seconds}s 后重新获取`
        }
      }, 1000)
    },
    async getCode(){
      let _self = this, {username} = this.params
      if(!isPhoneNum(username)) return _self.$message.error('手机号格式错误')
      _self.startTimer()
      _self.timerObj.loading = true
      await getCode(username).then(res => {
        _self.$message.success('验证码已发送');
      }).catch((err) => {
        _self.timerObj.loading = false
        _self.timerObj.seconds = 60
        clearInterval(_self.timerObj.timer)
      })
    },
    async verifyPhoneCode(){
      let _self = this, {username, code} = this.params
      if(!isPhoneNum(username)) return _self.$message.error('手机号格式错误')
      if(code == '' || !code) return _self.$message.error('验证码不能为空')
      _self.boo.submit_step2 = true
      await verifyPhoneCode({username, code}).then(res => {
        _self.step = 3
      })
      _self.boo.submit_step2 = false
    },
    async updatePassword(){
      let _self = this, {username, code, password, passwordWeb} = this.params
      if(!isPhoneNum(username)) return _self.$message.error('手机号格式错误')
      if(code == '' || !code) return _self.$message.error('验证码不能为空')
      if(password == '' || !password) return _self.$message.error('新密码不能为空')
      if(passwordWeb != password) return _self.$message.error('密码输入不一致')
      _self.boo.submit_step3 = true
      await updatePassword(_self.params).then(res => {
        _self.$message.success('重置成功，正在跳转登录')
        setTimeout(() => {
          _self.$router.replace({path: '/login'})
        }, 1500)
      })
      _self.boo.submit_step3 = false
    },
    jumpPage(path){
      this.$router.replace({path})
    },
  }
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.login-container {
  display: flex;
  height: 100vh;
  flex-direction: column;
  background-color: #fff;
  padding: vh(120) vw(200) vh(100) vw(200);
}

.login-form-content {
  position: relative;
  border-radius: vh(80);
  box-shadow: vh(20) vh(-20) 0 vh(10) rgba(174, 173, 173, 0.09);
  display: grid;
  grid-template-columns: 400px 1fr;
  gap: 30px;  
  align-items: center;
  height: 600px;
  .step-content{
    // padding: 100px 0 0 100px;
    .step-title{
      font-size: 13px;
      font-weight: 500;
      color: #0003AA;
      margin-bottom: 30px;
      display: block;
    }
    .step-txt{
      margin-bottom: 15px;
      color: #666666;
      font-size: 12px;
    }
    .form-item ::v-deep{
      display: grid;
      grid-template-columns: 120px 1fr;
      gap: 20px;
      .el-input__inner{
        border: none;
      }
      .form-label{
        font-size: 13px;
        color: #3E3E3E;
      }
      .form-val{
        border-bottom: 1px solid #D8D8D8;
        // width: 300px;
      }
    }
    .form-btn-content{
      margin-top: 30px;
      .form-btn{
        display: block;
        width: 100%;
      }
    }
  }
  .info-content{
    flex: 1;
    position: relative;
    align-items: center;
    // padding-top: 100px;
    .info-btn-content{
      width: 100%;
      margin-top: 30px;
      padding-left: 30px;
    }
    .login-icon{
      right: vw(223);
      top: vh(233);
      width: vw(323);
      height: vh(230);
    }
  }
}
</style>
